<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- The registered user home page, containing the calendar, the notification side-bar and the links to all MeteoCal functions -->
<ui:composition template="/templates/master_template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    
    <ui:define name="title">MeteoCal</ui:define>

    <ui:define name="content">
        
        <!--********* Notification side-bar *********-->
        <h:form id="notification_form">
            <p:panel styleClass="notification_sidebar">

                <h3>Notifications</h3>

                <c:choose>

                    <!-- Default message if no notifications to display -->
                    <c:when test="${empty notificationBean.unreadNotificationList()}">
                        <span><i>No unread notifications to display</i></span>
                    </c:when>

                    <!-- If there are some notifications... -->
                    <c:otherwise>

                        <!-- Loop all of them -->
                        <h:panelGrid columns="1" styleClass="notification_table table_with_normal_padding full_length_table">
                            <c:forEach items="${notificationBean.unreadNotificationList()}" var="notification">
                                <h:panelGroup>

                                    <!-- Display info for each notification -->
                                    <p style="color: ${notificationBean.getNotificationColor(notification)}">
                                        <b>${notification.title}</b>
                                    </p>
                                    <p><i>${notification.formattedSendDate}</i></p>
                                    <p class="notification_content">#{notification.content}</p>

                                    <!-- Check which buttons need to be shown --> 
                                    <c:choose>
                                        <c:when test="${notification.invitation}">
                                            <h:commandLink action="${notificationBean.acceptInvitation(notification)}" value="Accept" immediate="true">
                                                <f:ajax execute="@form" render="notification_form"/>
                                            </h:commandLink>
                                            &nbsp;&nbsp;
                                            <h:commandLink action="${notificationBean.declineInvitation(notification)}" value="Decline" immediate="true">
                                                <f:ajax execute="@form" render="notification_form"/>
                                            </h:commandLink>
                                        </c:when>
                                        <c:otherwise>
                                            <h:commandLink action="${notificationBean.setNotificationAsRead(notification)}" value="Got it!" immediate="true">
                                                <f:ajax execute="@form" render="notification_form"/>
                                            </h:commandLink>
                                        </c:otherwise>
                                    </c:choose>

                                </h:panelGroup>
                            </c:forEach>
                        </h:panelGrid> 
                    </c:otherwise>
                </c:choose>
            </p:panel>
        </h:form>

        <!--********* Home main content: calendar and day detauls *********-->
        <h:form id="calendar_form">

            <c:choose>

                <!-- If the user owns a calendar, show all calendar options -->
                <c:when test="#{calendarBean.ownsCalendar()}">

                    <!-- The calendar -->
                    <p:panel styleClass="calendar_container">
                        
                        <!-- Table header contains the current month/year notice and the forward/backward buttons -->
                        <div id="calendar_header">
                            <h:commandButton type="button" value="Prev" image="/resources/images/calendar_backward.png" styleClass="calendar_backward_button">
                                <f:ajax listener="#{calendarBean.previousMonth()}" render="dateData calendarTable day_details"/>
                            </h:commandButton>
                            <h:outputText id="dateData" value="#{calendarBean.currentMonth} #{calendarBean.currentYear}" styleClass="calendar_header_current_date"/>
                            <h:commandButton type="button" value="Next" image="/resources/images/calendar_forward.png" styleClass="calendar_forward_button">
                                <f:ajax listener="#{calendarBean.nextMonth()}" render="dateData calendarTable day_details"/>
                            </h:commandButton>
                        </div>

                        <!-- Start the calendar table -->
                        <h:panelGrid id="calendarTable" columns="7" styleClass="calendar_table">

                            <!-- Print row with the week day names -->
                            <c:forEach var="name" items="#{calendarBean.dayNames}">
                                <div class="calendar_day_name"><b>${name}</b></div>
                            </c:forEach>

                            <!-- Print empty cells at the beginning (if first day of month is not on Monday) -->
                            <c:forEach var="empty_cells" begin="1" end="#{calendarBean.emptyStartingCells}">
                                <div class="calendar_empty_cell"></div>
                            </c:forEach>

                            <!-- Print a cell for each day -->
                            <c:forEach var="day" begin="1" end="#{calendarBean.currentMonthDays}">
                                <h:panelGroup>
                                    <c:choose>

                                        <!-- If it's the current day, no link -->
                                        <c:when test="#{calendarBean.currentDay eq day}">
                                            <div class="calendar_current_day">
                                                ${day}
                                            </div>
                                        </c:when>

                                          <!-- Otherwise print link to get the day details -->
                                        <c:otherwise>
                                            <div class="calendar_day">
                                                <h:commandLink value="${day}">
                                                    <f:ajax listener="#{calendarBean.loadEventDetails(day)}" render="calendarTable day_details"/>
                                                </h:commandLink>
                                            </div>
                                        </c:otherwise>
                                    </c:choose>
                                </h:panelGroup>
                            </c:forEach>

                            <!-- Print empty cells at the end (if last day of month is not on Sunday) -->
                            <c:forEach var="empty_cells" begin="1" end="#{calendarBean.emptyEndingCells}">
                                <div class="calendar_empty_cell"></div>
                            </c:forEach>

                        </h:panelGrid>
                    </p:panel>

                    <!-- Day details -->
                    <p:panel id="day_details" styleClass="day_details_container">

                        <h3>
                            Events
                            <p:button id="add_event_button" outcome="add_event" value="+" styleClass="add_event_button"></p:button>
                            <p:tooltip for="calendar_form:add_event_button" value="Add new event"/>
                        </h3>

                        <c:choose>

                            <!-- If no events, show default message -->
                            <c:when test="#{empty calendarBean.eventList}">
                                <i><span>No events at this date</span></i>
                            </c:when>

                            <!-- If some events... -->
                            <c:otherwise>

                                <!-- Loop all of them -->
                                <h:panelGrid columns="1" styleClass="day_details_table table_with_normal_padding full_length_table">
                                    <c:forEach items="#{calendarBean.eventList}" var="event">
                                        <h:panelGroup>

                                            <!-- Show event details -->
                                            <p style="color: #{calendarBean.getEventColor(event)}; vertical-align: middle;">
                                                <span style="vertical-align: middle;"><b>#{calendarBean.getFormattedEventName(event)}</b></span>

                                                <!-- Action buttons only if the user can alter the event -->
                                                <c:if test="#{calendarBean.canAlterEvent(event)}">
                                                    &nbsp;
                                                    <h:button outcome="update_event" styleClass="small_button alter_event_button" image="/resources/images/edit_button.png">
                                                        <f:param name="event" value="#{event.id}"/>
                                                    </h:button>&nbsp;
                                                    <h:commandButton immediate="true" styleClass="small_button alter_event_button" image="/resources/images/delete_button.png" onclick="if(!confirm('Do you really want to delete this event?')) return false;">
                                                        <f:ajax execute="@form" listener="#{calendarBean.deleteEvent(event)}" render="calendar_form:day_details"/>
                                                    </h:commandButton>         
                                                </c:if>
                                            </p>
                                            <p><i>#{event.formattedStartTime}-#{event.formattedEndTime}</i>, #{event.fullLocation}</p>
                                            <p>
                                                <h:outputText value="Who's coming?" id="invited_users_for_#{event.id}" styleClass="invited_users_info"></h:outputText>
                                                <p:tooltip for="invited_users_for_#{event.id}" value="#{calendarBean.getInvitedUsersList(event)}"/>
                                            </p>
                                            <c:if test="#{not empty event.weatherForecast}">
                                                <p>#{event.weatherForecast}</p>
                                            </c:if>

                                        </h:panelGroup>
                                    </c:forEach>
                                </h:panelGrid>
                            </c:otherwise>
                        </c:choose>

                    </p:panel>
                </c:when>

                <!-- If the user does not own a calendar, just show a message and the link to create one -->
                <c:otherwise>
                    <p:panel styleClass="no_calendar_container">
                        <h2>Welcome to MeteoCal!</h2>
                        <p>
                            MeteoCal will allow you to manage your own calendar, create events and check the weather forecast.
                            <br/><br/>
                            <p:button outcome="create_calendar" value="Get started!"/>
                        </p>
                    </p:panel>
                </c:otherwise>
            </c:choose>

        </h:form>

    </ui:define>
</ui:composition>







